<template>
  <div>
    <el-table
      :data="BudgetAccount"
      style="width: 100%; margin-bottom: 20px"
      row-key="budgetItemId"
      border
      :tree-props="{ children: 'children' }"
      v-loading="loading"
    >
      <el-table-column
        width="350px"
        prop="budgetItemId"
        label="科目编码"
      ></el-table-column>
      <el-table-column width="350px" prop="budgetitemName" label="预算科目名称">
        <template v-slot="scope">
          <span v-show="scope.row.state"> {{ scope.row.budgetitemName }}</span>
          <el-input
            type="text"
            v-model="scope.row.budgetitemName"
            v-show="!scope.row.state"
          />
        </template>
      </el-table-column>
      <el-table-column width="200px" prop="budgetType" label="预算科目类别">
        <template v-slot="scope">
          <span v-show="scope.row.state">
            <el-tag v-if="scope.row.budgetType" type="primary">直接费用</el-tag>
            <el-tag v-else type="success">间接费用</el-tag>
          </span>
          <el-switch
            v-model="scope.row.budgetType"
            v-show="!scope.row.state"
            style="
              --el-switch-on-color: #0dbc76;
              --el-switch-off-color: #168eac;
            "
            :active-value="true"
            :inactive-value="false"
            active-text="直接经费"
            inactive-text="间接经费"
          />
        </template>
      </el-table-column>
      <el-table-column prop="budgetiState" label="预算科目状态" width="200px;">
        <template v-slot="scope">
          <span v-show="scope.row.state">
            <el-tag v-if="scope.row.budgetiState == 0" type="primary"
              >启用</el-tag
            >
            <el-tag v-else type="success">禁用</el-tag>
          </span>
          <el-switch
            v-model="scope.row.budgetiState"
            v-show="!scope.row.state"
            style="
              --el-switch-on-color: #0dbc76;
              --el-switch-off-color: #168eac;
            "
            :active-value="0"
            :inactive-value="1"
            active-text="启用"
            inactive-text="禁用"
          />
        </template>
      </el-table-column>
      <el-table-column :fit="true" label="操作">
        <template v-slot="scope">
          <el-button
            @click="handleEdit(scope.$index, scope.row)"
            v-show="scope.row.state"
            >编辑</el-button
          >
          <el-button
            type="success"
            @click="hold(scope.$index, scope.row)"
            v-show="!scope.row.state"
            >保存</el-button
          >
          <el-button
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button
            type="success"
            plain
            @click="InsertSubset(scope.$index, scope.row)"
            >添加子科目</el-button
          >
          <el-button
            type="success"
            plain
            v-if="scope.row.partentId == '0'"
            @click="TempVForm(scope.$index, scope.row)"
            >配置报销模板</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button type="warning" plain @click="addLine()">添加科目</el-button>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      BudgetAccount: [],
      loading: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.GetSubjectList();
  },
  mounted() {},
  methods: {
    //获取列表信息
    GetSubjectList() {
      this.loading = true;
      this.http
        .get(
          "api/Tb_Project_Templatesubject_Relationship/GetFundingItemListAll"
        )
        .then((res) => {
          console.log(res);
          this.BudgetAccount = res.data;
          this.loading = false;
        });
    },
    /* 编辑 */
    handleEdit(index, row) {
      row.state = false;
    },
    /* 保存，新添加的或修改后的重新保存 */
    hold(index, row) {
      //有id序走修改
      if (row.budgetItemId != undefined) {
        this.http
          .post(
            "api/Tb_Project_Fundtemplate_Item/UpdateFundingTemplateItemAsync",
            row
          )
          .then((res) => {
            console.log(res);
            if (res.status) {
              this.$message({
                type: "success",
                message: res.message,
              });
              this.GetSubjectList();
            } else {
              this.$message("保存失败");
            }
          });
      } //没id走添加
      else {
        this.http
          .post("api/Tb_Project_Fundtemplate_Item/InsertTemplateItemAsync", row)
          .then((res) => {
            console.log(res);
            if (res.status) {
              this.$message({
                type: "success",
                message: res.message,
              });
              this.GetSubjectList();
            } else {
              this.$message("添加失败");
            }
          });
      }
      row.state = true;
    },
    /* 删除 */
    handleDelete(index, row) {
      //console.log(index, row);
      //this.BudgetAccount.splice(row);
      if (row.children.lenth > 0) {
        this.$confirm("该科目下含有子科目确认删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.http
              .get(
                "api/Tb_Project_Fundtemplate_Item/DeleteFundingTemplateItemAsync?Id=" +
                  row.budgetItemId
              )
              .then((res) => {
                if (res.status) {
                  this.GetSubjectList();
                  this.$message({
                    type: "success",
                    message: res.message,
                  });
                } else {
                  this.$message({
                    type: "error",
                    message: res.message,
                  });
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        this.$confirm("确认删除？？？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.http
              .get(
                "api/Tb_Project_Fundtemplate_Item/DeleteFundingTemplateItemAsync?Id=" +
                  row.budgetItemId
              )
              .then((res) => {
                if (res.status) {
                  this.GetSubjectList();
                  this.$message({
                    type: "success",
                    message: res.message,
                  });
                } else {
                  this.$message({
                    type: "error",
                    message: res.message,
                  });
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
    },
    /* 为当前行添加子集(默认是可编辑状态)*/
    InsertSubset(index, row) {
      let obj = {
        budgetitemName: "",
        budgetType: true,
        budgetiState: 0,
        partentId: row.budgetItemId,
      };
      this.BudgetAccount.splice(index - 1, 0, obj);
      console.log(this.BudgetAccount);
    },
    /* 为当前行添加子集(默认是可编辑状态)*/
    TempVForm(index, row) {
      //this.$router.push('/VForm')
      window.location.href = "http://localhost:8098/#/?id=" + row.budgetItemId;
    },
    /* 添加新的一行 (默认是可编辑状态)*/
    addLine() {
      let obj = {
        budgetitemName: "",
        budgetType: true,
        budgetiState: 0,
        partentId: "0",
      };
      this.BudgetAccount.push(obj);
    },
    //添加科目预算报销模板
    InsertBudget(index, row) {
      this.$router.push("./Budgetemplate?id=" + row.budgetItemId);
    },
  },
};
</script>